<template>
	<!-- 底部客户tab页面 -->
	<view class="container">
		<uni-search-bar style="background-color: #fff;" @confirm="search" v-model="queryParams.Keyword"  @clear="cancel" placeholder="请输入店铺信息" @cancel="cancel"></uni-search-bar>
		<view class="content">
			<scroll-view class="scroll" style="width: 100%;" scroll-y="true" :show-scrollbar="false"
				@scrolltolower="lower">
				<view class="merchant" v-for="(item,index) in customerListData" :key="index">
					<view class="flexBox">
						<uni-icons type="shop"></uni-icons>
						<view>
							{{item.MerchantName}}
						</view>
					</view>
					<view class="flexBox">
						<uni-icons type="location"></uni-icons>
						<view>
							{{item.Address?item.Address:'无地址'}}
						</view>
					</view>
					<view class="flexBox alignItemCenter">
						<uni-icons type="phone"></uni-icons>
						<view class="flexBox alignItemCenter between flex1">
							<view class="flex1">
								{{item.Phone || "无电话"}}
							</view>
						</view>
					</view>
				</view>
				
				
			<!-- 上拉显示更多 -->
				<view class="" style="padding-bottom: 50rpx;">
					<uniLoadMore :status="status" :contentText="contentText" :rows="customerListData"></uniLoadMore>
				</view>
			</scroll-view>
		</view>
		
		<!-- 弹窗 @closeHandler = "closeHandler"
			@openHandler = "openHandler"-->
		<popUpCom v-model="showPop" :listData="customEnterpriseListData" @submitButtonAdd="submitButtonAdd"></popUpCom>
		<!-- <u-mask :show="show" @click="show = false"></u-mask> -->
	</view>
</template>

<script>
	// import mask from '@/components/mask.vue'
	// 引入公共接口
	import {
		// 获取客户列表数据
		GetAssistuClientPage,
		// 搜索客户列表
		GetEnterpriseList,
		// 提交添加客户
		AssistuClientSaveData,
	} from '@/api/interface.js'
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore,
			// mask
		},
		data() {
			return {
				// 是否显示弹窗
				showPop:false,
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了，请搜索客户进行添加'
				},
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				Total: 0,
				// 客户列表数据
				customerListData: [],
				queryParams:{
					// 搜索的关键词
					Keyword: '',
				},
				
				// 搜索的客户列表数据
				customEnterpriseListData:{},
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				// 用户信息
				userInfo: {},
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/User/User'
			})
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		onShow() {
			this.status="noMore"
			this.customerListData = []
			this.pagination.PageIndex = 1
			// 获取客户列表数据
			this.getCustomerListData()
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数
			// 加载
			this.status = "loading"
			this.customerListData = []
			this.pagination.PageIndex = 1
			// 重新获取查询数据
			this.getCustomerListData()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// 跳转
		onNavigationBarButtonTap(e) {
			this.$pageUrl('navigateTo', '/pages/user/User')
		},
		methods: {
			// 触底
			lower(e) {
				console.log('触底了')
				if (this.customerListData.length >= this.Total) {
					this.status = "noMore"
					return
				}
				this.getCustomerListData()
			},
			// 搜索
			search(){
				// this.customerListData=[]
				 this.pagination.PageIndex=1
				this.customerListData=[]
				this.getCustomerListData()
			},
			// 搜索取消
			cancel(){
				this.queryParams.Keyword=""
				 this.pagination.PageIndex=1
				this.customerListData=[]
				this.getCustomerListData()
			},
			
			
			// 子组件传递过来的添加方法
			submitButtonAdd(){
				var that = this
				this.$funToast.showLoading('添加中')
				AssistuClientSaveData({
					 "MerchantId": this.customEnterpriseListData.Id,
					  "MerchantName": this.customEnterpriseListData.Title,
					  "AssIstId": this.userInfo.Id,
				}).then(res=>{
					if(res.Success){
						setTimeout(function(){
							that.$funToast.hideLoading()
							that.$funToast.successToast('已添加')
							// 关闭弹窗
							that.showPop=false
							// 刷新列表
							// 获取客户列表数据
							that.customerListData=[]
							this.pagination.PageIndex=1
							that.getCustomerListData()
						}, 1500)
					}else{
						that.$funToast.toast(res.Msg)
						that.$funToast.hideLoading()
						// 关闭弹窗
						that.showPop=false
					}
				})
				
				
			},
			// 获取客户列表数据
			getCustomerListData() {
				this.status="loading"
				GetAssistuClientPage({
					...this.pagination,
					Search: {
						Keys: this.userInfo.Id,
						Keyword: this.queryParams.Keyword
					},
				}).then(res => {
					if (res.Success) {
						console.log('获取客户列表数据==========', res.Data)
						// 赋值总条数
						this.Total = res.Total
						if (res.Data.length == 0) {
							this.status = "noMore"
							return
						}
						if (this.pagination.PageIndex == 1) {
							this.customerListData = res.Data
							this.pagination.PageIndex += 1
						} else {
							this.customerListData = this.customerListData.concat(res.Data)
							this.pagination.PageIndex += 1
				
						}
						uni.stopPullDownRefresh(); //停止刷新
						if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
							// 暂停加载  没有更多了
							this.status = "noMore"
							return
						}
					} else this.$api.msg(res.Msg)
				}).catch((err) => {
					uni.showToast({
						icon: 'none',
						title: res.Msg
					})
					// 暂停加载  没有更多了
					this.status = "noMore"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex1 {
		flex: 1;
	}

	.flexBox {
		display: flex;
	}

	.alignItemCenter {
		align-items: center;
	}

	.between {
		justify-content: space-between;
	}

	.container {
        .content {
			.scroll {
				// 兼容H5和APP
				/* #ifdef H5 */
				height: calc(100vh - 165px);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 235px);
				/* #endif */
			}
			
			.merchant {
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 1px 1px 5px #ccc;
				box-sizing: border-box;
				padding: 20rpx;
				margin: 10px;
				color: #666;
			
				.uni-icons {
					margin-right: 10px;
					vertical-align: bottom;
				}
			
				.lineIcon {
					margin-right: 0;
				}
			
				.iconBox {
					color: #5cabfd;
				}
			
				.star {
					margin-right: 10px;
					color: #e88f21;
				}
			
				.merchantItem {
					padding-bottom: 5px;
					margin-bottom: 10px;
					border-bottom: 1px solid #ccc;
				}
			} 
		}
		
	}
</style>